<template>
    <div>
      <div>
        <el-row>
          <el-col :span="6"><el-input placeholder="请输入内容" v-model="userName" ></el-input></el-col>
          <el-col :span="2"><el-button type="primary" icon="el-icon-search" @click=getUserByName>搜索</el-button></el-col>
          <el-col :span="4"><el-button type="primary" @click="addUser">新增</el-button></el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-col :span="12">
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="filterText"
                  style="width:100px">
                </el-input>
              </el-col>
              <el-col :span="6">
                 <el-button type="primary" icon="el-icon-plus"  @click="openDepartAddWindow" circle></el-button>
              </el-col>
            </el-row>
            <el-tree
              class="filter-tree"
              :data="departData"
              :props="defaultProps"
              @node-contextmenu="optTree"
              :filter-node-method="filterNode"
              @node-click="getUserByIds"
              ref="tree">
            </el-tree>
          </el-col>
          <el-col :span="18">
             <el-table
              :data="userData"
              border
              style="width: 100%">
              <el-table-column
                fixed
                prop="userName"
                label="姓名"
                >
              </el-table-column>
              <el-table-column
                prop="loginName"
                label="登录名称"
                >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="delUserById(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
            <!--分页插件 -->
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
        <el-dialog
        title="添加部门"
        :visible.sync="departDialogVisible"
        width="30%"
        >
        <el-form ref="form" :model="departForm" label-width="80px">
          <el-dialog
            width="20%"
            title="选择部门"
            :visible.sync="innerVisible"
            append-to-body>
            <el-tree
              :data="departData"
              :props="defaultProps"
               @node-click="handleDepartClick"
              default-expand-all>
            </el-tree>
          </el-dialog>
          <el-form-item label="部门名称">
            <el-input v-model="departForm.name"></el-input>
          </el-form-item>
          <el-form-item label="父级名称">
            <el-input v-model="departForm.parentName" style="width:70%" disabled>
            </el-input>
            <el-button  type="primary" @click="selectDepart" style="margin-left:10px">父级</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="departDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveDepart">确 定</el-button>
        </span>
      </el-dialog>
      <el-card class="box-card" style="width:140px;line-height:20px;position: absolute;" ref="departTree" v-show="departTreeVisible">
          <div><a style="color:#409eff" @click="updateDepartTree">修改</a></div>
          <div><a type="text" style="color:red"  @click="delDepartTreeById">删除</a></div>
          <div><a type="text" style="color:green" @click="addChildNode">新增子节点</a></div>
      </el-card>
      </div>
      <!-- 用户 -->
      <div>
        <el-dialog
        title="提示"
        :visible.sync="userDialogVisible"
        width="30%"
        >
          <el-dialog
          width="20%"
          title="选择部门"
          :visible.sync="userInnerVisible"
          append-to-body>
          <el-tree
            :data="departData"
            :props="defaultProps"
            @node-click="handleUserDepartClick"
            default-expand-all>
          </el-tree>
          </el-dialog>
           <el-form  :model="userForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="登录名">
              <el-input v-model="userForm.loginName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="userForm.deptName" style="width:70%" disabled></el-input>
              <el-button  type="primary" @click="selectUserDepart" style="margin-left:10px">父级</el-button>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="userForm.roleName"></el-input>
            </el-form-item>
           </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="userDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click=saveUser>确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  data () {
    return {
      userName: '',
      userData: [],
      userInnerVisible: false,
      userDialogVisible: false,
      departTreeVisible: false,
      innerVisible: false,
      departForm: {
        name: '',
        parentId: 0,
        parentName: ''
      },
      departFormData: {
        name: '',
        parentId: 0,
        parentName: ''
      },
      departDialogVisible: false,
      filterText: '',
      departData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      userForm: {
        id: 0,
        userName: '',
        loginName: '',
        password: '',
        roleId: 0,
        roleName: '',
        deptId: 0,
        deptName: ''
      },
      total: 0,
      arr: [],
      page: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted () {
  //  this.getAllDepart()
    this.getUserByName()
  },
  methods: {
    getUserByIds (data, Node, self) {
      this.arr = []
      if (data.children.length > 0) {
        this.getChildId(data.children, this.arr)
      }
      this.arr.push(data.id)
      console.log(this.arr)
      debugger
    },
    getChildId (children, arr) {
      children.forEach(child => {
        if (child.children.length > 0) {
          this.getChildId(child, arr)
        } else {
          arr.push(child.id)
        }
      })
    },
    // 删除方法
    delUserById (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/user/delUserById', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.flag) {
            this.$message({
              message: '删除成功!',
              type: 'success'
              // message: '删除成功!'
            })
            this.getBookByBookName()
          } else {
            this.$message({
              message: res.data.obj,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getUserByName() // 加载新数据
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getUserByName()
    },
    getUserByName () {
      this.$axios.get('/user/getUserByName',
        {
          params: {
            id: this.arr.toString(),
            userName: this.userName,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }
        }).then((res) => {
        if (res.data.flag) {
          debugger
          this.userData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.$message({
            message: res.data.obj,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    selectUserDepart () {
      this.userInnerVisible = true
    },
    saveUser () {
      this.userForm.roleId = 1
      this.$axios.post('/user/saveUser', this.userForm)
        .then(res => {
          if (res.data.flag) {
            this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            })
            this.userDialogVisible = false
          } else {
            this.$message({
              message: res.data.obj,
              type: 'error'
            })
          }
        }).catch(error => {
          console.log(error)
        })
    },
    addUser () {
      this.userDialogVisible = true
    },
    updateDepartTree () {
      this.departDialogVisible = true
      this.departForm = this.departFormData
    },
    delDepartTreeById () {

    },
    addChildNode () { // 添加子节点
      this.departDialogVisible = true
      this.departForm.parentName = this.departFormData.name
      this.departForm.parentId = this.departFormData.id
      this.departForm.name = ''
      this.departForm.id = 0
    },
    optTree (event, data, Node, self) { // 操作部门树节点
      debugger
      this.departFormData = data
      this.$refs.departTree.$el.style.top = event.clientY + 'px'
      this.$refs.departTree.$el.style.left = event.clientX + 50 + 'px'
      this.departTreeVisible = true
      document.addEventListener('click', this.departTreeDisappear)
    },
    departTreeDisappear () {
      this.departTreeVisible = false
      document.removeEventListener('click', this.departTreeDisappear)
    },
    handleDepartClick (data) { // 选择父节点并赋值
      this.departForm.parentName = data.name
      this.departForm.parentId = data.id
      this.innerVisible = false
    },
    handleUserDepartClick (data) { // 选择父节点并赋值
      this.userForm.deptName = data.name
      this.userForm.deptId = data.id
      this.userInnerVisible = false
    },
    selectDepart () {
      this.innerVisible = true
    },
    getAllDepart () {
      this.$axios.get('/depart/getAllDepart').then((res) => {
        if (res.data.flag) {
          this.departData = res.data.obj
        } else {
          this.$message({
            message: res.data.obj,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    saveDepart () { // 部门新增
      this.$axios.post('/depart/saveDepart', this.departForm).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，添加成功',
            type: 'success'
          })
          this.departDialogVisible = false
          this.getAllDepart()
          this.departForm = {
            name: '',
            parentId: 0,
            parentName: ''
          }
        } else {
          this.$message({
            message: res.data.obj,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    openDepartAddWindow () { // 部门新增窗口
      this.departDialogVisible = true
    },
  }
}
</script>

<style>

</style>
